<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link
	href="<%=request.getContextPath()%>/CSS/ui-darkness/jquery-ui-1.9.2.custom.css"
	rel="stylesheet">
<script src="<%=request.getContextPath()%>/JS/jquery-1.8.3.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery-ui-1.9.2.custom.js"></script>
<script>
	$(function() {

		$("#accordion").accordion();

		var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC",
				"C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
				"Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
				"Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
		$("#autocomplete").autocomplete({
			source : availableTags
		});

		$("#button").button();
		$("#radioset").buttonset();

		$("#tabs").tabs();

		$("#dialog").dialog({
			autoOpen : false,
			width : 400,
			buttons : [ {
				text : "Ok",
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Cancel",
				click : function() {
					$(this).dialog("close");
				}
			} ]
		});

		$("#dialog-flange-location").dialog({
			autoOpen : false,
			width : 400,
			buttons : [ {
				text : "Ok",
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Cancel",
				click : function() {
					$(this).dialog("close");
				}
			} ]
		});

		$("#dialog-flange-id").dialog({
			autoOpen : false,
			width : 400,
			buttons : [ {
				text : "Ok",
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Cancel",
				click : function() {
					$(this).dialog("close");
				}
			} ]
		});

		// Link to open the dialog
		$("#dialog-link").click(function(event) {
			$("#dialog").dialog("open");
			event.preventDefault();
		});

		$("#dialog-link-flange-location").click(function(event) {
			$("#dialog-flange-location").dialog("open");
			event.preventDefault();
		});

		$("#dialog-link-flange-id").click(function(event) {
			$("#dialog-flange-id").dialog("open");
			event.preventDefault();
		});

		$("#datepicker").datepicker({
			inline : true
		});

		$("#slider").slider({
			range : true,
			values : [ 17, 67 ]
		});

		$("#progressbar").progressbar({
			value : 20
		});

		// Hover states on the static widgets
		$("#dialog-link, #dialog-link-flange-location, #dialog-link-flange-id")
				.hover(function() {
					$(this).addClass("ui-state-hover");
				}, function() {
					$(this).removeClass("ui-state-hover");
				});
	});
</script>
<style>
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

.demoHeaders {
	margin-top: 2em;
}

#dialog-link {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
}

#dialog-link-flange-location {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
}

#dialog-link-flange-id {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
}

#dialog-link span.ui-icon {
	margin: 0 5px 0 0;
	position: absolute;
	left: .2em;
	top: 50%;
	margin-top: -8px;
}

#dialog-link-flange-location span.ui-icon {
	margin: 0 5px 0 0;
	position: absolute;
	left: .2em;
	top: 50%;
	margin-top: -8px;
}

#dialog-link-flange-id span.ui-icon {
	margin: 0 5px 0 0;
	position: absolute;
	left: .2em;
	top: 50%;
	margin-top: -8px;
}

#icons {
	margin: 0;
	padding: 0;
}

#icons li {
	margin: 2px;
	position: relative;
	padding: 4px 0;
	cursor: pointer;
	float: left;
	list-style: none;
}

#icons span.ui-icon {
	float: left;
	margin: 0 4px;
}
</style>

<title>Search Field - FlangeData</title>
</head>
<body>
	<table>
		<tr>
			<th><p>
					<a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span
						class="ui-icon ui-icon-newwin"></span>Search by Client Name</a>
				</p></th>
			<th><p>
					<a href="#" id="dialog-link-flange-id"
						class="ui-state-default ui-corner-all"><span
						class="ui-icon ui-icon-newwin"></span>Search by Flange ID</a>
				</p></th>
			<th><p>
					<a href="#" id="dialog-link-flange-location"
						class="ui-state-default ui-corner-all"><span
						class="ui-icon ui-icon-newwin"></span>Search by Flange Location</a>
				</p></th>
		</tr>
	</table>






	<!-- ui-dialog -->
	<div id="dialog" title="Search by Client">
		<form name="searchByClient"
			action="<%=request.getContextPath()%>/Controller" method="post">
			<input type="hidden" name="whereFrom" value="searchByClient">
			<input type="text" name="TXTsearchByClient">
			<button id="button" type="submit" value="Search for Client !">Search
				for Client !</button>
		</form>
	</div>


	<!-- ui-dialog -->
	<div id="dialog-flange-id" title="Search by Flange ID">
		<form name="searchByFlangeID"
			action="<%=request.getContextPath()%>/Controller" method="post">
			<input type="hidden" name="whereFrom" value="searchByFlangeID">
			<input type="text" name="TXTsearchByFlangeID">
			<button id="button" type="submit" value="Search for Client !">Search
				for Flange ID !</button>
		</form>
	</div>


	<!-- ui-dialog -->
	<div id="dialog-flange-location" title="Search by Flange Location">
		<form name="searchByFlangeLocation"
			action="<%=request.getContextPath()%>/Controller" method="post">
			<input type="hidden" name="whereFrom" value="searchByFlangeLocation"> <input
				type="text" name="searchByFlangeLocation">
			<button id="button" type="submit" value="Search for Client !">Search
				for Flange Location !</button>
		</form>
	</div>



</body>
</html>